<template>
  <div id="gaonenghaohangye">
  </div>
</template>
<script>
import echarts from "echarts";
import shenzhenJson from "../../../public/json/shenzhen.json";
// import { getJson } from "../../../api/public.js";
require("echarts/theme/macarons"); // echarts theme
import echarsData from "../../../public/json/echarsData.json";
export default {
  props: {
    tabIndexVal: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.createLine();
  },
  watch: {
    tabIndexVal(val, oldVal) {
      if (val == 1) {
        this.createLine();
      } else if (val == 2) {
        this.createLine2();
      } else if (val == 3) {
        this.createLine3();
      } else if (val == 4) {
        this.createMap();
      }
    },
  },
  methods: {
    createLine() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      var chartDom = document.getElementById("gaonenghaohangye");
      this.myChart = echarts.init(chartDom);
      var option;
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;

      var legend = [];
      var years = [];

      for (const key in gaohaonenghangyebaobiao.series) {
        years.push(key);
      }

      var ll_serise = [];

      option = {
        title: {
          text: "重点用能单位",
          subtext: "总能耗趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: years,
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: "#fff",
            },
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        color: [
          "#5ad8a6",
          "#f6bd16",
          //"#e8684a",
          "#5470c6",
          "#87ba76",
          "#fac858",
          //"#ea7c71",
          "#f1ab60",
          "#1ab8c2",
          "#418dd3",
        ],

        series: [
          {
            data: [820, 932, 901, 934, 1290],
            type: "line",
            smooth: true,
          },
        ],
      };

      option && this.myChart.setOption(option);
    },
    createLine2() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;
      var chartDom = document.getElementById("gaonenghaohangye");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "重点用能单位",
          subtext: "能耗占比趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var total = 0;

            for (var i = 0; i < params.length; i++) {
              total += params[i].data;
            }

            var res_array = [];
            res_array[0] = "";
            for (var j = 0; j < params.length; j++) {
              var temp = params[j];
              res_array[0] = temp.axisValue;
              res_array.push(
                temp.seriesName +
                  ":" +
                  ((parseInt(temp.data) * 100) / total).toFixed(2) +
                  "%"
              );
            }
            return res_array.join("<br/>");
          },
        },
        legend: {
          show: false,
          data: [
            "福田区",
            "南山区",
            "龙岗区",
            "龙华区",
            "坪山区",
            "盐田区",
            "光明区",
            "大鹏新区",
            "罗湖区",
            "宝安区",
            "深汕合作区",
          ],
        },
        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: "#fff",
            },
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        series: [
          {
            name: "福田区",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "南山区",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "龙岗区",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "龙华区",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "坪山区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },

          {
            name: "盐田区",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "光明区",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "大鹏新区",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "罗湖区",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "宝安区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },
          {
            name: "深汕合作区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    createLine3() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;
      var chartDom = document.getElementById("gaonenghaohangye");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "重点用能单位",
          subtext: "各区占比趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var res_array = [];
            res_array[0] = "";
            for (var j = 0; j < params.length; j++) {
              var temp = params[j];
              res_array[0] = temp.axisValue;
              res_array.push(temp.seriesName + ":" + temp.data + "家");
            }
            return res_array.join("<br/>");
          },
        },
        legend: {
          show: false,
          data: [
            "福田区",
            "南山区",
            "龙岗区",
            "龙华区",
            "坪山区",
            "盐田区",
            "光明区",
            "大鹏新区",
            "罗湖区",
            "宝安区",
            "深汕合作区",
          ],
          textStyle: {
            fontSize: 14, //字体大小
            color: "#fff", //字体颜色
          },
          orient: "vertical",
          left: "center",
          bottom: "bottom",
        },
        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        series: [
          {
            name: "福田区",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "南山区",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "龙岗区",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "龙华区",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "坪山区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },

          {
            name: "盐田区",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "光明区",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "大鹏新区",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "罗湖区",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "宝安区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },
          {
            name: "深汕合作区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    createMap() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      let zhongdianyongneng = echarsData.zhongdianyongneng;
      var myChart = echarts.init(document.getElementById("gaonenghaohangye"));
      echarts.registerMap("深圳", shenzhenJson);

      var yearArr = ["数量"];
      var yearIndex = 0;
      var selectedRange = null;
      var option = null;
      var str = "";
      var data = [];
      var geoCoordMap = {};

      var mapFeatures = echarts.getMap("深圳").geoJson.features;
      mapFeatures.forEach(function (v, index) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
        data.push({
          name: name,
          value: [
            {
              name: "数量",
              value: zhongdianyongneng.rawData[index][1],
            },
          ],
        });
      });

      function convertMapDta(year, data) {
        var mapData = [];
        data.forEach(function (v) {
          v.value.forEach(function (v1) {
            if (String(v1.name) === String(year)) {
              mapData.push({
                name: v.name,
                value: v1.value,
              });
            }
          });
        });
        return mapData;
      }

      function convertData(mapChart, count, areaName) {
        var geo = mapChart.getModel().getComponent("geo").coordinateSystem;

        var region = geo.getRegion(areaName);
        var rect = region.getBoundingRect();
        var geoCoordMap = [];
        var s_count=parseInt(count/10);
        for (var i = 0; i < s_count; i++) {
          var coord = [Infinity, Infinity];
          while (!region.contain(coord)) {
            coord[0] = rect.x + Math.random() * rect.width;
            coord[1] = rect.y + Math.random() * rect.height;
          }
          const itemName = "s" + i;
          geoCoordMap.push({
            name: itemName,
            value: [coord[0], coord[1], count],
          });

          // console.log(geoCoordMap);
        }
        return geoCoordMap;
      }

      function addPie(chart, data) {
        var op = chart.getOption();
        var sd = option.series;
        for (var i = 0; i < data.length; i++) {
          // var randomValue = Math.round(Math.random() * 30);
          //var radius = randomValue <= 10 ? 10 : randomValue;
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            var vr = [];
            data[i].value.map(function (v, j) {
              vr.push({
                name: v.name,
                value: v.value,
              });
            });
            sd.push({
              name: "scatter_" + data[i].name + "企业数",
              type: "scatter",
              symbolSize: 5,
              coordinateSystem: "geo",
              data: convertData(chart, vr[0].value, data[i].name),
              label: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              emphasis: {
                label: {
                  show: false,
                },
              },
              itemStyle:{color:'#fff' },
            });
          }
        }
        return sd;
      }

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "重点用能单位",
          subtext: "各区分布",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            //console.log(params)
            if (params.value && params.componentSubType != "scatter") {
              return (
                params.name + "<br/>" + yearArr[yearIndex] + ": " + params.value
              );
            }
          },
        },
        geo: {
          map: "深圳",
          //center: geoCoordMap[areaName], //当前视角的中心点，用经纬度表示  这个搭配放大 可开始就定位
          //zoom: 1, //当前视角的缩放比例。
          roam: false,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
        },
        visualMap: {
          min: 0,
          max: 120,
          right: "2%",
          top: "bottom",
          seriesIndex: 0,
          text: ["高", "低"],
          calculable: true,
          color: [
            "#5ad8a6",
            "#f6bd16",
            //"#e8684a",
            "#5470c6",
            "#87ba76",
            "#fac858",
            //"#ea7c71",
            "#f1ab60",
            "#1ab8c2",
            "#418dd3",
          ],
        },
        series: [
          {
            name: "chinaMap",
            type: "map",
            mapType: "深圳",
            roam: false,
            // roam: true,
            label: {
              position: "top",
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#eee",
              },
            },
            data: convertMapDta(yearArr[yearIndex], data),
            /*zlevel:3*/
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }

      addPie(myChart, data);
      // console.log("===========option=================");
      // console.log(option);
      myChart.setOption(option, true);
    },
  },
};
</script>
<style>
#map {
  height: 90%;
}
</style>
